<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
    <link rel="stylesheet" href="Css/ClassCss.css">
    <script src="jQuery.js"></script>
</head>
<body>
<div class="container">
    <div class="left">
        <div class="left-top"></div>
        <ul>
            <li id="xue">学生</li>
            <li>课程</li>
            <li>选课</li>
        </ul>
    </div>

    <div class="right">
        <div class="right-top">
            <img src="imgs/u156.svg" alt="" id="Fly">
        </div>
        <div class="right-bottom">
            <div class="bottom-top">
                <span id="add">新增</span>
            </div>
            <div class="add">
                <div class="add-head">
                    <span>新增</span>
                    <span class="X">X</span>
                </div>
                <div class="add-body">
                    <div class="shu"> <span>课程名</span> <input type="text" placeholder="请输入课程名" id="name-One"></div>
                    <div class="shu"> <span>课程编码</span> <input type="text" placeholder="请输入课程编码" id="no-One"></div>
<!--            -->
                </div>
                <div class="add-bottom">
                    <span class="no">取消</span>
                    <span class="dui">确定</span>
                </div>
            </div>
            <div class="Change">
                <div class="add-head">
                    <span>修改</span>
                    <span class="X">X</span>
                </div>
                <div class="add-body">
                    <div class="shu"> <span>名字</span> <input type="text" placeholder="请输入名字" id="name"></div>
                    <div class="shu"> <span>年龄</span> <input type="text" placeholder="请输入课程编码" id="no"></div>
                </div>
                <div class="add-bottom">
                    <span class="no">取消</span>
                    <span class="yes">确定</span>
                </div>
            </div>
            <div class="bottom-cha">
                <span>用户名</span>
                <input type="text" placeholder="3">
                <span id="cha">查询</span>
            </div>
            <div class="bottom-type">
                <table class="biao" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名字</th>
                        <th>课程编码</th>

                        <th>操作</th>

                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="">
                    <button class="left-move">&lt;</button>
                    <span id="page">

                    </span>
                    <button class="right-move">&gt;</button>


                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        let id = 0;
        var page = 1;
        var size = 5;//一页显示数量
        show()

        function show() {
            $("tbody").empty();//先清除 在获取避免重复
            $.ajax({
                url: '/course/list.php',
                type: 'POST',//上传方式
                dataType: 'json',//数据类型
                // contentType: 'application/json; charset=utf-8',
                async: false,//异步
                data:{
                    size:size,
                    page:page
                },
                success: function (data) {
                    if (data.code == 200) {
                        var Cshuai =data.data.list;//接受数据
                        // console.log(Cshuai)
                        var count = data.data.count;//接受数量数据

                        $("#page").empty();//先清除里面的节点
                        for (var i = 0; i <= Math.ceil(count / size); i++) {//页码数量
                            $("#page").text(i);//将i显示在page

                        }
                        for (var i = 0; i< Cshuai.length; i++) {//遍历数据
                            let tr = $("<tr></tr>");//创建一整行
                            $("<td>" + Cshuai[i].id + "</td>").appendTo(tr);//讲td放到tr里
                            $("<td>" + Cshuai[i].courseName + "</td>").appendTo(tr);
                            // if (Cshuai[i].sex==1){
                            //     $("<td>男</td>").appendTo(tr);
                            // }else {
                            //     $("<td>女</td>").appendTo(tr);
                            // };
                            $("<td>" + Cshuai[i].courseNo + "</td>").appendTo(tr);
                            // $("<td>" + Cshuai[i].edu + "</td>").appendTo(tr);
                            // $("<td>" + Cshuai[i].city + "</td>").appendTo(tr);
                            // $("<td>" + Cshuai[i].no + "</td>").appendTo(tr);
                            $("<td>\n" +
                                " <span class=\"Gai\">修改</span>\n" +
                                " <span class=\"Shan\">删除</span>\n" +
                                "</td>").appendTo(tr)
                            tr.appendTo($("tbody"));//将整个tr添加到tbody里面
                        }
                    }
                }
            })
        }
        $("tbody").on("click", ".Shan", function () {
            let id = $(this).parents("tr").children(":first-child").text();
            let obj = {
                "id": id// 根据文档找ID
            }
            let mes = confirm("确定删除吗？");//confirm 是一个提示框类型的
            if (mes == true) {
                $.ajax({
                    url: '/course/delete.php',
                    type: 'POST',
                    data: obj,
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.code == 200) {
                            alert("删除成功")
                            show();
                        } else {
                            alert(data.msg)
                        }
                    }

                });
            } else {
                alert("删除失败");
            }

            //第一个子元素td便是id,parents为查找tr

        });//删除
        $("tbody").on("click", ".Gai", function () {
            id = $(this).parents("tr").children(":first-child").text()
            // let obj={
            //     "bannerId":id
            // }
            $(".Change").show();
            $(".no").click(function () {//取消按钮
                $(".Change").hide();
                $("input").val("");
            })

        })//修改
        $(".yes").click(function () {

            let name = $("#name").val();//设置一个变量存储值
            let no = $("#no").val();//
            let obj = {
                "id": id,
                "courseName": name,
                "courseNo": no

            };
            $.ajax({
                url: '/course/update.php',
                type: 'POST',
                data: obj,
                // contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                async: false,
                success: function (data) {
                    if (data.code == 200) {

                        show();
                        $(".Change").hide();
                        $("input").val("")
                    } else {
                        alert(data.msg)
                    }
                }
            })
        })//确认按钮 改
        $(".dui").click(function () {

            var name = $("#name-One").val();//设置一个变量存储值
            var no = $("#no-One").val();//
            let obj = {
                "id": id,
                "courseName": name,
                "courseNo": no

            };
            $.ajax({
                url: '/course/add.php',
                type: 'POST',
                data: obj,
                // contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                async: false,
                success: function (data) {
                    if (data.code == 200) {
                        show();
                        $(".add").hide();
                        $("input").val("")
                    } else {
                        alert(data.msg)
                    }
                }
            })
        })//确认按钮 增
    })

</script>
<script src="Js/IndexJs.js"></script>
</body>
</html>